<template>
  <div class="login-container">
    <video src="@/assets/video/video.mp4" autoplay loop muted></video>
    <el-card class="el-card layui-anim layui-anim-downbit">
      <div class="login-logo">
        <img src="@/assets/images/login-logo.png" alt="">
      </div>
      <login-form></login-form>
      <div class="tip">仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息(如手机号、身份证号等)！</div>
    </el-card>
    <div class="copy">
      <ul>
        <li>江苏传智播客教育科技股份有限公司</li>
        <li>版权所有Copyright 2024 All Rights Reserved</li>
        <li>湘ICP备16007882号</li>
        <li>开发者:陶品奇</li>
        <li>用户名:demo</li>
        <li>密码:hm#qd@23!或888itcast.CN764%...</li>
      </ul>
    </div>
  </div>
</template>

<script>


import LoginForm from '@/views/login/components/loginForm.vue'

export default {
  name: 'Login',
  components: { LoginForm },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #889aa4;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: #889aa4;
      height: 47px;
      caret-color: #889aa4;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid #cccccc;
    background: #ffffff;
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style scoped lang="scss">
.login-container {
  position: relative;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;


  video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;

  }

  .el-card {
    width: 450px;
    border-radius: 22px;
    padding: 20px 0;
    z-index: 999;
    .login-logo {
      margin-bottom: 30px;
      text-align: center;

      img {
        width: 200px;
      }
    }

    ::v-deep .el-card__body {
      padding: 20px;
    }
  }

  .tip {
    color: #fd3333;
    padding: 0 20px;
    margin-top: 8px;
    line-height: 20px;
  }

  .copy {
    color: #ffffff;
    position: absolute;
    bottom: 20px;

    ul {
      display: flex;

      li {
        margin: 0 8px;
        font-size: 14px;
      }
    }
  }

}
</style>

